<!-- 数据统计看板 -->
<template>
	<div id="dataStatisBoard">
		<structureTree class="card" @getNodeData="getcurInfo" />
		<div class="detail">
			<div class="title card">{{ curTitle }}</div>
			<div class="content card">
				<div class="indicator">
					<div class="category">
						<div class="category-title"><UserOutlined />人力案件</div>
						<div class="category-content">
							<div v-for="item in indicatorData.userCase" :key="item.field" class="category-content-item">
								<span class="label">{{ item.label }}</span>
								<span class="value">{{ item.value }}</span>
							</div>
						</div>
					</div>
					<div class="category">
						<div class="category-title"><ProjectOutlined />工作度量</div>
						<div class="category-content">
							<div v-for="item in indicatorData.workMetric" :key="item.field" class="category-content-item">
								<span class="label">{{ item.label }}</span>
								<span class="value"> {{ item.value }}</span>
							</div>
						</div>
					</div>
					<div class="category">
						<div class="category-title"><PieChartOutlined />工作效率</div>
						<div class="category-content">
							<div v-for="item in indicatorData.workEfficiency" :key="item.field" class="category-rate-item">
								<div class="progress-text">
									<span class="label">{{ item.label }}</span>
									<span class="value">
										{{ item.value }}
									</span>
								</div>
								<a-progress
									:strokeColor="colorMap(item.value * 100)"
									trailColor="#ccc"
									:percent="item.value * 100"
									:showInfo="false"
								/>
							</div>
						</div>
					</div>
				</div>
				<ChartStatis :curInfo="curInfo" />
			</div>
		</div>
	</div>
</template>
<script setup name="dataStatisBoard">
	import structureTree from '@/views/bi/dataBoard/dataStatisBoard/structureTree.vue'
	import ChartStatis from '@/views/bi/dataBoard/dataStatisBoard/ChartStatis.vue'
	import dataStatisBoardApi from '@/api/bi/dataBoard/dataStatisBoard/dataStatisBoardApi.js'
	// ===========================================DATA======================================================
	const curTitle = ref('全国范围')
	const curInfo = ref({}) //当前节点信息
	const indicatorData = ref({
		userCase: [
			{
				label: '出勤人力',
				field: 'attendUser',
				value: 156123
			},
			{
				label: '在催人力',
				field: 'debtUser',
				value: 123456
			},
			{
				label: '案件量',
				field: 'caseLoad',
				value: 121313
			},
			{
				label: '人均案件量',
				field: 'avgCase',
				value: 14122
			}
		],
		workMetric: [
			{
				label: '外呼总量',
				field: 'calloutNum',
				value: 25632
			},
			{
				label: '接通总量',
				field: 'connectNum',
				value: 12345
			},
			{
				label: '人均拨打量',
				field: 'avgCallout',
				value: 23456
			},
			{
				label: '接通总时长',
				field: 'connectDuration',
				value: 45678
			},
			{
				label: '有效通话总时长',
				field: 'effectDuration',
				value: 78901
			},

			{
				label: '人均通话时长',
				field: 'avgConnectDuration',
				value: 34567
			},
			{
				label: '人均有效通话时长',
				field: 'avgEffectDuration',
				value: 45678
			}
		],
		workEfficiency: [
			{
				label: '接通率',
				field: 'rateConnect',
				value: 0.85
			},
			{
				label: '活跃率',
				field: 'rateActive',
				value: 0.55
			},
			{
				label: '平均活跃率',
				field: 'rateAvgActive',
				value: 0.25
			}
		]
	})
	// ===========================================WATCH=====================================================
	// ===========================================LIFECYCLE HOOKS===========================================
	// ===========================================METHODS==================================================
	const getcurInfo = (val) => {
		curInfo.value = val
		// getCurIndicatorData()
		// getChartData()
		if (val.type === 'company') {
			curTitle.value = val.name
		} else if (val.type === 'project') {
			curTitle.value = `${val.name} - ${val.project.name}`
		} else if (val.type === 'team') {
			curTitle.value = `${val.name} - ${val.project.name} - ${val.project.team.name}`
		}
	}
	const colorMap = (num) => {
		if (num < 30) {
			return '#d9363e'
		} else if (num >= 30 && num <= 60) {
			return '#d48806'
		} else {
			return '#389e0d'
		}
	}
	// ===========================================REQUEST==================================================
	//获取指标数据
	const getCurIndicatorData = () => {
		dataStatisBoardApi
			.getIndicatorData(curInfo.value.id)
			.then((res) => {
				if (res.code === 200) {
					indicatorData.value = res.data
				} else {
					indicatorData.value = {}
				}
			})
			.catch((err) => {
				console.error('获取指标数据失败:', err)
			})
	}
	//获取图表数据
	const getChartData = () => {}
</script>
<style lang="less" scoped>
	#dataStatisBoard {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-gap: 20px;
		width: 100%;
		height: calc(100vh - 110px);
		border-radius: 5px;
		> div {
			height: 100%;
			color: #fff;
		}
		#structureTree {
			width: 44%;
			// background: #fff;
		}
		.detail {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			width: 55%;
			> div {
				// background: #fff;
			}
			.title {
				display: flex;
				justify-content: start;
				align-items: center;
				height: 60px;
				font-size: 20px;
				font-weight: 600;
				padding: 0 16px;
			}
			.content {
				flex: 1;
				display: flex;
				flex-direction: column;
				margin-top: 16px;
				padding: 16px;
				.indicator {
					display: flex;
					gap: 20px;
					justify-content: space-between;
					height: 38%;
					overflow: hidden;
					padding-bottom: 16px;
					.category {
						flex: 1;
						display: flex;
						flex-direction: column;
						.category-title {
							display: flex;
							align-items: center;
							height: 40px;
							font-weight: 600;
							line-height: 30px;
							font-size: 16px;
							margin-bottom: 8px;
							span {
								font-size: 26px;
								color: #69b1ff;
								margin-right: 8px;
							}
						}
						.category-content {
							cursor: default;
							flex: 1;
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							overflow-y: auto;
							padding-right: 2px;
							//滚动条样式
							&::-webkit-scrollbar {
								width: 6px;
								height: 6px;
							}
							&::-webkit-scrollbar-thumb {
								background: #3d76f6;
								border-radius: 3px;
							}
							&::-webkit-scrollbar-track {
								background: rgba(255, 255, 255, 0.1);
								border-radius: 3px;
							}
							.category-content-item {
								height: 40px;
								display: flex;
								justify-content: space-between;
								align-items: center;
								padding: 16px;
								border: 1px solid #5794f7;
								border-radius: 6px;
								margin-bottom: 8px;
								.label {
									font-size: 14px;
								}
								.value {
									font-size: 20px;
									color: #69b1ff;
									font-weight: 700;
								}
							}
							.category-rate-item {
								padding: 0 8px;
								.progress-text {
									display: flex;
									justify-content: space-between;
									align-items: center;
									font-size: 14px;
									margin-bottom: 8px;
									.value {
										font-size: 20px;
										color: #69b1ff;
										font-weight: 700;
									}
								}
							}
							.category-content-item:last-child,
							.category-rate-item:last-child {
								margin-bottom: 0;
							}
						}
					}
				}
			}
		}
		.card {
			color: #fff;
			padding: 20px;
			border-radius: 5px;
			border: 2px solid transparent;
			border-image: linear-gradient(
					45deg,
					transparent,
					#2657d1,
					#5794f7,
					#1a3fbe,
					transparent,
					#708ce1,
					#2a5cea,
					#96bae4
				)
				1;
		}
	}
</style>
